<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
      <!-- a标签点击跳转会刷新页面，性能不好 -->
      <!-- <a class="list-group-item" href="/about">About</a>
      <a class="list-group-item active" href="/home">Home</a> -->
      <!-- 
        router-link是vue-router提供的全局组件
        功能：相当于a标签，点击路由跳转。
        特点：不会刷新页面，只会更新浏览器地址
       -->
      <router-link class="list-group-item" to="/teacher">Teacher</router-link>
      <router-link class="list-group-item" to="/student">Student</router-link>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
      <!-- 
        router-view是vue-router提供的全局组件 
        功能：
          会根据当前浏览器地址，遍历路由配置项，看哪个配置项匹配上当前浏览器地址
          然后渲染匹配上的路由组件
      -->
      <router-view/>
    </div>
  </div>

</template>
<script>

export default {
  name: "App",
}
</script>
<style>

</style>